const path = require('path')
// webpack中所有的配置信息写在module.exports中
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
	entry: './src/index.ts',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: '[name].[contenthash:10].js',
		clean: true,
		environment: {
			// The environment does not supports arrow functions ('() => { ... }').
			arrowFunction: false
		}
	},
	// 指定webpack打包时使用的模块
	// module: {
	// 	// 指定加载的规则
	// 	rules: [
	// 		{
	// 			test: /\.ts$/,
	// 			use: 'ts-loader',
	// 			exclude: /node_modules/
	// 		},
	// 	]
	// },

	module: {
		rules: [
			{
				test: /\.tsx?$/,
				use: [
					{
						loader: 'babel-loader',
						options: {
							// 设置预定义环境
							presets: [
								[
									// 设置环境的插件
									'@babel/preset-env',
									// 配置信息，
									{
										// 要兼容的目标浏览器
										targets: {
											'chrome': '58',
											'ie': '11'
										},
										//指定corejs版本
										corejs: '3',
										// 使用corejs方式，usage,按需加载
										useBuiltIns: 'usage'
									}
								]
							]
						}
					},
					'ts-loader'
				],
				exclude: /node_modules/
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			title: '管理输出',
			template: path.resolve(__dirname, "src/public/index.html"),
		})
	],
	// 设置以js/ts/tsx结尾的文件，可以作为模块引入
	resolve: {
		extensions: ['.ts', '.js', '.tsx']
	},
	mode: 'production',
	devServer: {
		host: "localhost", // 启动服务器域名
		port: "3001", // 启动服务器端口号
		// open: true, // 是否自动打开浏览器
		hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）
	},
}